<style>

.brand-slider {
  display: flex;
  
  white-space: nowrap;
}

.brand-logo {
  flex: 0 0 auto;
  margin-left: 10px;
}

.brand-logo img {
  width: 50px;
  height: 50px;
}

/* Add media queries for responsive behavior */
@media (max-width: 767px) {
  .brand-logo img {
    width: 40px;
    height: 40px;
  }
}


</style>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="brand-slider">
        <div class="brand-logo">
        <img src="{{media url=wysiwyg/visa-svgrepo-com.png}}" alt="" />
        </div>
        <div class="brand-logo">
        <img src="{{media url=wysiwyg/mastercard-svgrepo-com.png}}" alt="" />
        </div>
        <div class="brand-logo">
        <img src="{{media url=wysiwyg/google-pay-svgrepo-com_3.png}}" alt="" />
        </div>
        <!-- Add more brand logos here -->
        <div class="brand-logo">
        <img src="{{media url=wysiwyg/apple-pay-svgrepo-com.png}}" alt="" />
        </div>
        <div class="brand-logo">
        <img src="{{media url=wysiwyg/alipay-svgrepo-com.png}}" alt="" />
        </div>
        <div class="brand-logo">
        <img src="{{media url=wysiwyg/amazon-pay-svgrepo-com.png}}" alt="" />
        </div>
        <div class="brand-logo">
        <img src="{{media url=wysiwyg/discover-svgrepo-com.png}}" alt="" />
        </div>
        <div class="brand-logo">
        <img src="{{media url=wysiwyg/jcb-svgrepo-com.png}}" alt="" />
        </div>
        <div class="brand-logo">
        <img src="{{media url=wysiwyg/stripe-svgrepo-com.png}}" alt="" />
        </div>
        <div class="brand-logo">
        <img src="{{media url=wysiwyg/paypal-svgrepo-com_3.png}}" alt="" />
        </div>

      </div>
    </div>
  </div>
</div>